<template>
    <div class="self_adaption">
        <div>
            <!-- 遮罩层 -->
            <div id="mask" v-if="show" @click="maskBtn"></div>
            <AddEdit v-if="show" :show="show" @close="close" :type="type" :formdate="formdate"></AddEdit>
            <el-button @click="addBtn" class="solid"
                style="margin-top: 40px; margin-left: 1.6%; margin-bottom: 10px">添加文章</el-button>
            <!-- 搜索 -->
            <Details @searchBtn="searchBtn" :searchValue1="searchValue1" @changeSearchValue="changeSearchValue">
            </Details>
            <!-- 表格 -->
            <div class="table">
                <el-table :data="tableData" height="600px" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center' }" border>
                    <el-table-column type="index" :index="indexMethod" label="序号" width="80" align="center" />
                    <el-table-column prop="title" label="标题" show-overflow-tooltip="true" align="center" />
                    <el-table-column prop="author" label="作者" width="160" align="center" />
                    <el-table-column prop="articleType" label="文章分类" width="200" align="center" />
                    <el-table-column prop="createdAt" label="上传时间" width="220" align="center" />
                    <el-table-column prop="status" label="状态" width="140" :formatter="nameFormatter" align="center" />
                    <el-table-column label="操作" width="180" align="center">
                        <template #default="item">
                            <el-button size="small" @click="handleEdit(item.$index, item)">编辑</el-button>
                            <el-button size="small" type="danger" @click="handleDelete(item.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页器 -->
            <el-pagination @current-change="pageChange" :page-size="15" :page-sizes="[100, 200, 300, 400]"
                :current-page="page" small background layout="prev,total, pager, next" :total="total" class="mt20" />
        </div>
    </div>
</template>
<script setup>
import AddEdit from '@/components/AddEdit.vue'
import Details from '@/components/Details.vue'
import { articleContent } from '@/hooks/Article/Content.ts'
const {
    page,
    tableData, // 表格数据
    type, //判断点击的是添加还是编辑
    formdate, // 传递添加/编辑组件的数据
    type_options, //分类
    show, //是否显示添加/删除的组件
    total, //总共多少数据
    close, //关闭添加/删除组件
    handleEdit, //编辑点击事件
    addBtn, //添加按钮点击事件
    handleDelete, //删除按钮点击事件
    maskBtn, //遮罩层点击事件
    pageChange, //页数发生改变
    indexMethod, //文章序号
    searchValue1,
    acquireList, //获取文章
} = articleContent()

/**
 * 重置文章搜索
 */
const changeSearchValue = value => {
    searchValue1.value = value
    acquireList()
}
const nameFormatter = (row, column) => {
    if (row.status === 0) {
        return '已删除'
    }
    if (row.status === 1) {
        return '已发布'
    }
    if (row.status === 2) {
        return '已禁止'
    }
    if (row.status === 3) {
        return '未发布'
    }
}
const searchBtn = (value, totalValue) => {
    tableData.value = value
    total.value = totalValue
    console.log('父组件接收', value)
    console.log('父组件接收', totalValue)
}
</script>
<style lang="scss" scoped>
.self_adaption{
  background-color: white;
}
.addArticle {
    width: 100px;
    height: 32px;
    border-radius: 5px;
    margin-left: 20px;
    margin-bottom: 20px;
    background: #409eff;
    color: white;
    border: 0;
    display: block;
}

.table {
    width: 96%;
    height: 600px;
    border: 1px solid #a3a3a3;
    margin: 10px auto;
    box-shadow: 1px 1px 1px 1px #a3a3a3;
}

#mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(114, 114, 114, 0.502);
    z-index: 99;
}
</style>
